<template>
  <div>
    <div ref="order" class="order" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {

    }
  },

  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.order)
    var options = {
      title: {
        text: '订单退单柱状图',
        textStyle: {
          color: '#ccc',
          fontSize: 22,
          fontWeight: 'normal'
        }
      },
      legend: {
        bottom: 0,
        left: 'center'
      },
      tooltip: {},
      xAxis: {
        data: []
      },
      yAxis: {
        axisLine: {
          show: true
        },
        axisTick: {
          show: true
        },
        // 多条横线
        splitLine: {
          show: false
        }
      },
      series: [
        {
          name: '订单',
          type: 'bar',
          data: [],
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#7d05e2' // 0% 处的颜色
              }, {
                offset: 1, color: '#bb03e5' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        },
        {
          name: '退单',
          type: 'bar',
          data: [],
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#24cbff' // 0% 处的颜色
              }, {
                offset: 1, color: '#2493ff' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }
      ]
    }
    for (let i = 0; i < 80; i++) {
      options.series[0].data.push(parseInt(Math.random() * 10))
      options.series[1].data.push(parseInt(Math.random() * 10))
      options.xAxis.data.push(`date${i + 1}`)
    }
    // 绘制图表
    myChart.setOption(options)
  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
.order{
  width: 100%;
  height: 100%;
}
</style>
